<template>
  <div class="main">
    <div class="top">
      <span class="return" @click="returnIndex">&lt;</span>
      <span class="fontSize" @click="show">A</span>
    </div>
    <div class="title">
      <span>{{airticles.texttitle}}</span>
    </div>
    <div class="tip">
      <span>昨天09:03</span>
      <span>|</span>
      <span>预计阅读 10 分钟</span>
    </div>
    <div class="author">
      <img src="../../static/image/aa.jpg">
      <span class="name">{{airticles.author}}</span>
      <span class="xinxi">{{airticles.identity}}</span>
      <button class="look" @click="changeLook">{{ this.look }}</button>
      <button class="message">收藏</button>
    </div>
    <div class="text" v-html="airticles.textContent" :style="{fontSize:FontSize+'px'}">
<!--      <Article></Article>-->
    </div>
  </div>
</template>

<script>
// import Article from "@/components/indextext/Article";
import axios from 'axios'
export default {
  data(){
    return{
      airticles:{},
      id:'',
      showMask:false,
      FontSize:16,
      look:'',
      name:'1'
    }
  },
  // components:{
  //   Article
  // },
  methods:{
    returnIndex(){
      this.$router.push("/index")
    },
    getArticle(){
      if (this.$route.params.id!=null){
        this.id=this.$route.params.id;
      }
      axios.post("http://localhost:9999/getarticle",{params:this.id}).then((res)=>{
          this.airticles=res.data.data[0];
          sessionStorage.setItem('author',res.data.data[0].author)
      })
    },
    show(){
      console.log(this.FontSize)
      if (this.FontSize+5>=55){
        this.FontSize=16;
      }else{
        this.FontSize+=5;
      }
    },
    changeLook(){
      if (this.look=='关注'){
        this.look='已关注'
      }else {
        this.look='关注'
      }
    }
  },
  created() {
    this.getArticle()
  },
  mounted() {
    let FollowersID;
    let coverID;
    let reqCode={

    }
    if (sessionStorage.getItem('user')!=null){
      FollowersID=JSON.parse(sessionStorage.getItem('user')).id
    }
    axios.post('http://localhost:9999/selectID',{params:sessionStorage.getItem('author')}).then((res)=>{
      coverID=res.data.data[0].id
      if (res.data.code==200){
        reqCode={
          FollowersID:FollowersID,
          coverID:coverID
        }
        axios.post('http://localhost:9999/selectFlower',{params:reqCode}).then((res)=>{
          if (res.data.code==200){
            this.look='已关注'
          }else {
            this.look='关注'
          }
        })
      }
    })
  }
}
</script>

<style>
.main .top .return {
  font-size: 20px;
}

.main .top .fontSize {
  float: right;
  font-size: 20px;
}
.main .title{
  font-size: 24px;
  font-weight: bold;
}
.main .tip{
  font-size: 14px;
  color: #cccccc;
}
.main .author img{
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.main .author .name{
  position: absolute;
}
.main .author button{
  height: 30px;
  /*width: 48px;*/
  border: 1px solid #cccccc;
  background-color: white;
  margin-top: 8px;
  margin-left: 5px;
  float: right;
}
.main .author .look{
  color: red;
  font-size: 13px;
}
.main .author .message{
  font-size: 13px;
}
.main .author .xinxi{
  color: #cccccc;
}



</style>